<template>
    <i :class="getIconfont" :style="getSTyle" v-if="!isImageOrBase64(props.name)"></i>
    <img :src="getIconfont" alt="" v-else :style="{ height: props.size + 'px', width: props.size + 'px' }">
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
    name: {
        type: String
    },
    size: {
        type: Number,
        default: () => 14
    },
    color: {
        type: String,
        default: () => ''
    }
})

function isImageOrBase64(str?: string): boolean {
    if (!str) return false;
    // 判断是否为常见的图片格式
    const imageExtensions = /\.(jpe?g|png|gif|bmp|webp)$/i;
    const matchesExtension = imageExtensions.test(str);

    // 判断是否为 base64 编码
    const base64Pattern = /^data:image\/[a-z]+;base64,/;
    const matchesBase64 = base64Pattern.test(str);

    return matchesExtension || matchesBase64;
}

const getIconfont = computed(() => {
    return props?.name
})

const getSTyle = computed(() => {
    return { color: props?.color, FontSize: props?.size }
})
</script>

<style scoped lang="scss"></style>